import React from 'react';
import {Button,Select,DatePicker,Table,Message,Form} from 'antd';
const FormItem = Form.Item;
let love1 = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    getInitialState(){
      return{
        state:true,
        amount:1000000,
        rest:100000,
        dateRange:[],
        pagination: {
           currentPage: 1,
            pageSize: 5
        },
        countData:[],
        myCount:[],
      };
    },
      componentDidMount(){
       this.getCountDetail();
       this.handleSearch();
    },
      handleSearch() {
        this.setState({
          pagination: {
            currentPage: 1,
            pageSize: 5
          }
        })
        this.fetch();
    },
    getCountDetail(){
      let params={};
      let self= this;
      Utils.sendAjax({
            url:'/user/account/detail',
            data:JSON.stringify(params),
            callback:function(result){
              if(result.code=='200'){
                self.setState({
                  myCount:result.start
                });
              }
            }
          });

    },
    fetch(){

      let self = this;
      let forms = this.props.form.getFieldsValue();
      let page = this.state.pagination.currentPage;
      console.log(page);
      let data = {
        // startTime:this.state.dateRange[0]||now.toLocaleDateString(),
        // endTime:this.state.dateRange[1]||now.toLocaleDateString(),
        startTime:this.state.dateRange[0]||'',
        endTime:this.state.dateRange[1]||'',
        tradeType:'',
        acType:forms.acType,
      };
      let params = Object.assign({}, {pageSize: 5, currentPage: page}, data);

      let now = new Date();
 
      Utils.sendAjax({
        url:'/user/account/list',
        data:JSON.stringify(params),
        callback:function(result){
          if(result.code=='200'){
            Message.success(result.message);
            self.setState({
              countData:result.data,
              pagination: result.page
            });
          }
        }
      });
    },
    handleTableChange(pagination) {
      console.log(pagination);
        const pager = this.state.pagination;
        pager.currentPage = pagination.current;
        console.log(pager);
        this.setState({
            pagination: pager
        });
        this.fetch();
    },
    handleReset() {
      this.props.form.resetFields();
    },
     onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
        this.setState({
          dateRange:dateString
      });
    },
    toCharge(){
      this.context.router.push('system/rechargeIndex/detail');
    },
    toCash(){
      this.context.router.push('system/cashIndex/getCash');
    },
    render(){
      const Option = Select.Option;
      const RangePicker = DatePicker.RangePicker;
      const acType = {1:'基础账户',2:'增值账户'};
      const Columns =[ {
         title:'交易时间',
         dataIndex:'createTime',
         key:'createTime'
      },{
        title:'类型',
        dataIndex:'acType',
        key:'acType',
        render: text => <span>{acType[text]}</span>,
      },{
        title:'金额',
        dataIndex:'amount',
        key:'amount'
      },{
        title:'备注',
        dataIndex:'remark',
        key:'remark'
      }];
      const data = this.state.countData;
      const { getFieldProps } = this.props.form;
      const acTypeProps = getFieldProps('acType',{initialValue: ''});
      return (
        <div>
        <div className='basicInfo'>
          <div className='basicItem'>
             <i className="getMoney1"></i>
             <div>
               <div><font>{this.state.myCount.bscAccount}</font><font>元</font></div>
               <div><font>基础账户余额</font>(可提现)</div>
             </div>
          </div>
          <div className ="basicItem">
              <Button type='primary' onClick={this.toCash}>立即提现</Button>
          </div>
          <div className='basicItem'>
             <i className="getMoney"></i>
             <div>
               <div><font>{this.state.myCount.incAccount}</font><font>元</font></div>
               <div><font>增值账户余额</font><br/><span style={{fontSize:'0.6rem'}}>(用于增值服务，不可提现)</span></div>
             </div>
          </div>
          <div className='basicItem'><Button type='primary' onClick={this.toCharge}>立即充值</Button><Button type='primary' style={{marginLeft:'1rem'}}>户内转账</Button></div>
        </div>
        <div className='formList search-bar'>
            <Form inline style={{paddingBottom:'20px'}}>
                <FormItem label='账户类型'>
                <Select {...acTypeProps} style={{width:'162px'}}>
                <Option value='1'>基础账户</Option>
                <Option value='2'>增值账户</Option>
                </Select>
               </FormItem>
               <FormItem label='日期范围'>
             <RangePicker    showTime
                    format="YYYY-MM-dd HH:mm:ss"
                    placeholder={['Start Time', 'End Time']}
                    onChange={this.onChange}
                    onOk={this.onOk}/>
               </FormItem>
              <FormItem>
               <Button type='primary' onClick={this.handleSearch} style={{marginRight:'20px'}}>查 询</Button>
               <Button type='primary' onClick={this.handleReset}>重 置</Button>
               </FormItem>
               <FormItem>
             </FormItem>
             </Form>

           <div className='formBody'>
             <Table columns={Columns} dataSource={data} rowKey={record => record.id}
             onChange={this.handleTableChange}
                       pagination={this.state.pagination} />
           </div>
        </div>
        </div>
      )
    }
});
love1 = Form.create()(love1);
export default love1;
